import Masonry from 'react-masonry-css'
import './PhotoGallery.css'

function PhotoGallery({ photos }) {
  // 根据屏幕尺寸设置不同的列数
  const breakpointColumnsObj = {
    default: 4,
    1100: 3,
    700: 2,
    500: 1
  };

  return (
    <div className="photo-gallery">
      {photos.length === 0 ? (
        <div className="no-photos">暂无照片，请上传一些照片吧！</div>
      ) : (
        <Masonry
          breakpointCols={breakpointColumnsObj}
          className="masonry-grid"
          columnClassName="masonry-grid-column"
        >
          {photos.map((photo) => (
            <div key={photo.filename} className="photo-item">
              <img src={photo.url} alt={photo.filename} loading="lazy" />
            </div>
          ))}
        </Masonry>
      )}
    </div>
  );
}

export default PhotoGallery;